<template>
  <div>
    <!--头部区域-->
    <el-card class="box-card" shadow="never">
      <i class="el-icon-s-order" style="font-size: 18px; margin-right: 6px"></i>
      <span>左侧菜单列表</span>
    </el-card>
    <!--内容区域-->
    <div class="table-container" style="margin-top: 20px">
      <el-table
        border
        :data="listData"
        style="width: 100%"
        v-loading="isLoading"
      >
        <el-table-column prop="id" label="编号" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="菜单名称" align="center" width="250">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="菜单级别" align="center" width="250">
          <template slot-scope="scope">
            {{ scope.row.parentId | levelFilter }}
          </template>
        </el-table-column>
        <el-table-column label="菜单图标" align="center" width="250">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.row.parentId | disableNextLevel"
              @click="handleShowNextLevel(scope.$index, scope.row)"
              >查看下一级</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分类列表的分页区域-->
    <div class="pagination-contaiiner" style="margin-top: 20px; float: right">
      <el-pagination
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getLeftMenu } from "../../../api/adminApi";
export default {
  data() {
    return {
      listData: [], // 表格的数据源
      pageSize: 5,
      pageNum: 1,
      total: 0,
      isLoading: false,
      parentId: 0,
    };
  },
  watch: {
    $route() {
      this.resetParentId(); // resetParentId  重置parentId
      this.getList(); // parentId变了，重置获取数据
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 重置parentId
    resetParentId() {
      this.pageNum = 1;
      if (this.$route.query.parentId !== undefined) {
        this.parentId = this.$route.query.parentId;
      } else {
        this.parentId = 0;
      }
    },
    // 获取菜单数据
    getList() {
      this.isLoading = true;
      getLeftMenu(this.pageNum, this.pageSize, this.parentId).then((res) => {
        if (res.status == 1) {
          this.isLoading = false;
          this.listData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    // 点击页码
    handlePageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 切换一页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    // 查看下一级
    handleShowNextLevel(index, row) {
      this.$router.push({ path: "/um/menu", query: { parentId: row.id } });
    },
  },
  filters: {
    // 过滤器也是函数
    levelFilter(value) {
      if (value === 0) {
        return "一级";
      } else {
        return "二级";
      }
    },
    disableNextLevel(value) {
      // 一级分类  value是0   value !== 0  false
      // 二级分类  value不是0   value !== 0  true
      return value !== 0;
    },
  },
};
</script>

<style>
</style>